<template>
  <div class="home">
    <!-- 二级路由坑 -->
    <router-view v-if="$route.path === '/home/searchPopup'"></router-view>
    <main v-else>
      <!--搜索框 -->
      <van-search
        shape="round"
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
        @click="$router.push('/home/searchPopup')"
      />

      <!-- 轮播图 -->
      <SwiperCom :banner="banner"></SwiperCom>

      <!-- grid 居家-志趣组件 -->
      <Grid :channel="channel"></Grid>

      <!-- 品牌制造  商直供  -->
      <Support :brandList="brandList"></Support>

      <!-- 周一周四新品首发 -->
      <Weekproduct
        :newGoodsList="newGoodsList"
        title="周一周四新品首发"
      ></Weekproduct>

      <!-- 人气推荐 top组件 -->
      <!-- v-if 保证了有数据才渲染该组件，等渲染该组件的时候，才执行该组件的生命周期函数-->
      <Top :hotGoodsList="hotGoodsList" v-if="hotGoodsList.length > 0"></Top>

      <!-- 专题精选 -->
      <TopicBox :topicList="topicList" title="专题精选"></TopicBox>

      <!-- 产品列表 -->
      <Weekproduct
        v-for="item in categoryList"
        :key="item.id"
        :newGoodsList="item.goodsList"
        :title="item.name"
      >
      </Weekproduct>
    </main>
  </div>
</template>

<script>
// 导入轮播图组件
import SwiperCom from "@/components/SwiperCom";
import { getIndexList } from "@/https/http.js";
// 引入 grid  居家-志趣组件
import Grid from "@/views/home/Grid";
// 引入support 组件-品牌制造商直供
import Support from "@/views/home/Support";
import Weekproduct from "@/views/home/Weekproduct";
import TopicBox from "@/views/home/TopicBox";
import Top from "@/views/home/Top";
export default {
  name: "home",
  data() {
    return {
      value: "",
      banner: [], //轮播图
      channel: [], //居家-志趣数据
      brandList: [], // 品牌制造商数据
      newGoodsList: [], // 周一周四新品首发数据
      hotGoodsList: [], // 人气推荐
      topicList: [], // 专题精选
      categoryList: [], //产品列表
    };
  },

  components: {
    SwiperCom,
    Grid,
    Support,
    Weekproduct,
    TopicBox,
    Top,
  },
  created() {
    // 发送请求，获取数据
    getIndexList().then((res) => {
      console.log("res", res);
      this.banner = res.data.banner;
      this.channel = res.data.channel;
      this.brandList = res.data.brandList;
      this.newGoodsList = res.data.newGoodsList;
      this.topicList = res.data.topicList;
      this.categoryList = res.data.categoryList;
      this.hotGoodsList = res.data.hotGoodsList;
    });
  },
  methods: {
    onSearch() {},
    onCancel() {},
  },
};
</script>

<style lang="less" scoped>
.home {
  padding-bottom: 100px;
  box-sizing: border-box;
}
</style>
